<template>
  <div class="hello">
    <div>
      <h1>库存一览</h1>
    </div>
    <div id="demo2" class="divF">
      <div id="showData1">
        <div style="width: 100%">
          <div id="backDiv" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xxs-12" style="float: right">
            <button type="submit" class="btn btn-default" @click="back">返回主画面</button>
          </div>
        </div>
        <table class="table table-striped table-hover table-bordered dataTable" id="inventoryTable">
          <thead>
          <tr>
            <th>仓库名称</th>
            <th>大仓库剩余</th>
            <th>中仓库剩余</th>
            <th>小仓库剩余</th>
            <th>微仓库剩余</th>
            <th>所属城市</th>
            <th>所属行政区</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          </table>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
    }
  },
  mounted: function () {
    $.ajax({
      type: 'POST',
      url: 'http://localhost:3000/inventory',
      headers: {
        'Conten-Type': 'http://localhost:3000/inventory'
      },
      success: function (backDate) {
        // body...
        // console.log(backDate)
        $.each(backDate, function (n, value) {
          var col1 = $('<td>' + value.m0001002 + '</td>')
          var col2 = $('<td>' + value.m0001003 + '</td>')
          var col3 = $('<td>' + value.m0001004 + '</td>')
          var col4 = $('<td>' + value.m0001005 + '</td>')
          var col5 = $('<td>' + value.m0001006 + '</td>')
          var col6 = $('<td>' + value.m0001008 + '</td>')
          var col7 = $('<td>' + value.m0001009 + '</td>')
          var row = $('<tr></tr>')
          row = row.append(col1, col2, col3, col4, col5, col6, col7)
          row.appendTo($('#inventoryTable'))
        })
      }
    })
  },
  methods: {
    back: function () {
      this.$router.push({path: '/login'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #search {
    margin-bottom: 10px;
  }
  .divF{
    vertical-align: middle;
    position: absolute !important;
    width: 100%;
  }
  .hide {
     display: none;
  }
</style>
